<template>
  <div class="allStyle">
    <el-form
      :model="dianBiaoFormForm"
      :rules="rulesTable"
      ref="dianBiaoFormForm"
      class="dianBiaoFormForm"
    >
      <h4>实验数据记录与处理 分数：60</h4>
      <p>1.待改装微安表参数记录表</p>
      <div>
        微安表表头满量程电流：Ig =
        <input
          onkeyup="value=value.replace(/[^\d.]/g,'')"
          v-model="dianBiaoFormForm.lg"
          type="text"
          style="
            border-top: none;
            border-right: none;
            border-left: none;
            outline: none;
            text-align: center;
            width: 10%;
          "
        />
        uA
        <input
          onkeyup="value=value.replace(/[^\d.]/g,'')"
          disabled
          placeholder="（6分)"
          type="text"
          style="
            background-color: #fff;
            border: none;
            outline: none;
            text-align: center;
            width: 7%;
          "
        />
      </div>
      <div>
        表头内阻：Rg =
        <input
          onkeyup="value=value.replace(/[^\d.]/g,'')"
          v-model="dianBiaoFormForm.rg"
          type="text"
          style="
            border-top: none;
            border-right: none;
            border-left: none;
            outline: none;
            text-align: center;
            width: 10%;
          "
        />
        Ω
        <input
          onkeyup="value=value.replace(/[^\d.]/g,'')"
          disabled
          placeholder="（6分)"
          type="text"
          style="
            background-color: #fff;
            border: none;
            outline: none;
            text-align: center;
            width: 7%;
          "
        />
      </div>
      <p>2.电流表改装设计实验数据记录表</p>
      <hot-table
        :settings="dianbiaoSettingsOne"
        :rowHeaders="true"
        :colHeaders="true"
      ></hot-table>
      <p>3.电压表改装设计实验数据记录表</p>
      <hot-table
        :settings="dianbiaoSettingsTow"
        :rowHeaders="true"
        :colHeaders="true"
      ></hot-table>
      <h4>思考题（每题10分） 分数：40</h4>
      <!-- 选择题第一题 -->
      <div>
        1.测量改装表内阻的方法，正确的是(&nbsp;<span v-html="contentOne"></span
        >&nbsp;)。
      </div>
      <el-form-item prop="xz1">
        <el-radio-group v-model="dianBiaoFormForm.xz1">
          <el-radio label="A" @change="getRadioValOne">A.电压法</el-radio>
          <el-radio label="B" @change="getRadioValOne">B.替代法</el-radio>
          <el-radio label="C" @change="getRadioValOne">C.等效法</el-radio>
          <el-radio label="D" @change="getRadioValOne">D.外推法</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 选择题第二题 -->
      <div>
        2.以下关于电流表的表述正确的是(&nbsp;<span v-html="contentTwo"></span
        >&nbsp;)。
      </div>
      <el-form-item prop="xz2">
        <el-radio-group v-model="dianBiaoFormForm.xz2">
          <el-radio label="A" @change="getRadioValTwo"
            >A.电流表的内阻较小，如果误用电流表去测电压，有烧毁电表的风险</el-radio
          >
          <el-radio label="B" @change="getRadioValTwo"
            >B.电流表的档位决定了它可通过的最小电流</el-radio
          >
          <el-radio label="C" @change="getRadioValTwo"
            >C.电流表可以用于测量电压，而无需切换到电压测试档</el-radio
          >
          <el-radio label="D" @change="getRadioValTwo"
            >D.电流表的内阻越大越好</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 选择题第三题 -->
      <div>
        3.
        由于磁电式电表结构上的一些缺陷，使得电表在正常条件下测量依然存在误差。
      </div>
      <div>
        引起误差的主要原因有(&nbsp;<span v-html="contentThree"></span>&nbsp;)。
      </div>
      <el-form-item prop="xz3">
        <el-radio-group v-model="dianBiaoFormForm.xz3">
          <el-radio label="A" @change="getRadioValThree"
            >A.转动机构的摩擦</el-radio
          >
          <el-radio label="B" @change="getRadioValThree"
            >B.弹簧的弹性线性不良</el-radio
          >
          <el-radio label="C" @change="getRadioValThree"
            >C.磁场分布不均匀</el-radio
          >
          <el-radio label="D" @change="getRadioValThree"
            >D.仪表盘刻度不精确</el-radio
          >
          <el-radio label="E" @change="getRadioValThree">E.以上都有</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 选择题第四题 -->
      <div>
        4.标称电表满刻度时，改装的电表未满刻度或超过满刻度，这种情况扩程电阻是大还是小及其原因，以下描述不正确的是？
        (&nbsp;<span v-html="contentFour"></span>&nbsp;)
      </div>
      <el-form-item prop="xz4">
        <el-radio-group v-model="dianBiaoFormForm.xz4">
          <el-radio label="A" @change="getRadioValFour"
            >A.对于改装的电流表，未满刻度时，扩程电阻小，因其分流大；</el-radio
          >
          <el-radio label="B" @change="getRadioValFour"
            >B.对于改装的电流表，超过满刻度时，扩程电阻大，因其分流小；</el-radio
          >
          <el-radio label="C" @change="getRadioValFour"
            >C.对于改装的电压表，未满刻度时，扩程电阻大，因其分压大；</el-radio
          >
          <el-radio label="D" @change="getRadioValFour"
            >D.对于改装的电压表，超过满刻度时，扩程电阻小，因其分压大；</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <h4>线上资源</h4>
      <p class="addmargin">
        1）在线实验报告系统链接：
        <a style="text-decoration: none" href="http://180.76.111.200:3001/"
          >http://180.76.111.200:3001/</a
        >
      </p>
      <el-form-item>
        <el-button plain class="btn" type="primary" @click="storage()"
          >暂存</el-button
        >
        <el-button
          class="btn"
          type="primary"
          @click="submitForm('dianBiaoFormForm')"
          >提交</el-button
        >
        <br />
      </el-form-item>
    </el-form>
    <!-- 暂存按钮的弹窗 -->
    <el-dialog title="提示" :visible.sync="DialogVisible" width="30%" center>
      <el-divider></el-divider>
      <div style="text-align: center">请 您 确 定 您 是 否 要 暂 存 ？</div>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="(DialogVisible = false), storageOk()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { HotTable } from "@handsontable/vue";
import { registerAllModules } from "handsontable/registry";
import "handsontable/dist/handsontable.full.css";

registerAllModules();

export default {
  components: {
    HotTable,
  },
  data() {
    return {
      // 第一个表-1.直流电表的扩程设计
      dianbiaoSettingsOne: {
        manualRowResize: true, // 自定义行宽
        manualColumnResize: true, // 自定义列高
        preventOverflow: "vertical", // 防止水平溢出表
        headerTooltips: true, // header 内容过长提示
        // 数据部分
        data: [
          // 定义行，一共有3行
          {
            conent: "改装要求",
            number: "量程I =",
            rx: "mA",
          },
          {
            conent: "改装计算",
            number: "分流电阻",
            number1: "Rs =",
            rx: "Ω",
          },
          {
            conent: "未知信号电流",
            number1: "lx =",
            rx: "mA",
          },
        ],
        //最大列
        maxCols: 5,
        //最大行
        maxRows: 3,
        autoColumnSize: true, // 自适应列大小
        rowHeights: 30,
        // customBorders:[],//添加边框
        // 合并的列
        mergeCells: [
          { row: 0, col: 1, rowspan: 1, colspan: 2 },
          { row: 2, col: 0, rowspan: 1, colspan: 2 },
          // { row: 0, col: 6, rowspan: 3, colspan: 1 },
        ],
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            // cellProperties.editor = false;
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            editor: false,
            type: "text",
            width: 150,
          },
          // 第二列
          {
            data: "number",
            width: 120,
            // type: "numeric",
            // 设置显示格式
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第三列
          {
            data: "number1",
            width: 120,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第四列
          {
            data: "number2",
            width: 120,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第五列
          {
            data: "rx",
            width: 50,
          },
        ],
        // colHeaders: false,
        // 设置表头 + 表头合并
        nestedHeaders: [
          //第一行
          [
            {
              label: "直流电表的扩程设计",
              colspan: 7,
            },
          ],
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          // console.log(this.getData());
          const dianbiaol = window.localStorage.getItem("dianbiaol");
          // console.log(xiangshira1);
          if (dianbiaol !== "null") {
            // this.getData()[1][1] = dianbiaol
            this.setDataAtCell(0, 3, dianbiaol);
          }
          const dianbiaors = window.localStorage.getItem("dianbiaors");
          if (dianbiaors !== "null") {
            this.setDataAtCell(1, 3, dianbiaors);
          }
          const dianbiaolx = window.localStorage.getItem("dianbiaolx");
          if (dianbiaolx !== "null") {
            this.setDataAtCell(2, 3, dianbiaolx);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getCellEditor());//获取全部的值
          // 挨个获取需要传给后端的值
          // console.log(this.getData()[1][1]);
          const l = this.getData()[0][3];
          sessionStorage.setItem("l", l);
          // console.log(this.getData()[1][2]);
          const rs = this.getData()[1][3];
          sessionStorage.setItem("rs", rs);
          // // console.log(this.getData()[1][3]);
          const lx = this.getData()[2][3];
          sessionStorage.setItem("lx", lx);
        },
      },
      dianbiaoSettingsTow: {
        manualRowResize: true, // 自定义行宽
        manualColumnResize: true, // 自定义列高
        preventOverflow: "vertical", // 防止水平溢出表
        headerTooltips: true, // header 内容过长提示
        // 数据部分
        data: [
          // 定义行，一共有3行
          {
            conent: "改装要求",
            number: "量程Vm =",
            rx: "V",
          },
          {
            conent: "改装计算",
            number: "分压电阻",
            number1: "Rf =",
            rx: "Ω",
          },
          {
            conent: "未知信号电压",
            number1: "Vx =",
            rx: "V",
          },
        ],
        //最大列
        maxCols: 5,
        //最大行
        maxRows: 3,
        autoColumnSize: true, // 自适应列大小
        rowHeights: 30,
        // customBorders:[],//添加边框
        // 合并的列
        mergeCells: [
          { row: 0, col: 1, rowspan: 1, colspan: 2 },
          { row: 2, col: 0, rowspan: 1, colspan: 2 },
          // { row: 0, col: 6, rowspan: 3, colspan: 1 },
        ],
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            // cellProperties.editor = false;
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            editor: false,
            type: "text",
            width: 150,
          },
          // 第二列
          {
            data: "number",
            width: 120,
            // type: "numeric",
            // 设置显示格式
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第三列
          {
            data: "number1",
            width: 120,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第四列
          {
            data: "number2",
            width: 120,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第五列
          {
            data: "rx",
            width: 50,
          },
        ],
        // colHeaders: false,
        // 设置表头 + 表头合并
        nestedHeaders: [
          //第一行
          [
            {
              label: "直流电表的改装设计",
              colspan: 7,
            },
          ],
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          // console.log(this.getData());
          const dianbiaovm = window.localStorage.getItem("dianbiaovm");
          // console.log(xiangshira1);
          if (dianbiaovm !== "null") {
            // this.getData()[1][1] = dianbiaol
            this.setDataAtCell(0, 3, dianbiaovm);
          }
          const dianbiaorf = window.localStorage.getItem("dianbiaorf");
          if (dianbiaorf !== "null") {
            this.setDataAtCell(1, 3, dianbiaorf);
          }
          const dianbiaovx = window.localStorage.getItem("dianbiaovx");
          if (dianbiaovx !== "null") {
            this.setDataAtCell(2, 3, dianbiaovx);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getCellEditor());//获取全部的值
          // 挨个获取需要传给后端的值
          // console.log(this.getData()[1][1]);
          const vm = this.getData()[0][3];
          sessionStorage.setItem("vm", vm);
          // console.log(this.getData()[1][2]);
          const rf = this.getData()[1][3];
          sessionStorage.setItem("rf", rf);
          // // console.log(this.getData()[1][3]);
          const vx = this.getData()[2][3];
          sessionStorage.setItem("vx", vx);
        },
      },

      contentOne: "",
      contentTwo: "",
      contentThree: "",
      contentFour: "",
      dianBiaoFormForm: {
        lg: "",
        rg: "",
        l: "",
        rs: "",
        lx: "",
        vm: "",
        rf: "",
        vx: "",
        xz1: "",
        xz2: "",
        xz3: "",
        xz4: "",
      },
      rulesTable: {
        lg: [{ required: true, message: "请填写选项", trigger: "blur" }],
        rg: [{ required: true, message: "请填写选项", trigger: "blur" }],
        l: [{ required: true, message: "请填写选项", trigger: "blur" }],
        rs: [{ required: true, message: "请填写选项", trigger: "blur" }],
        lx: [{ required: true, message: "请填写选项", trigger: "blur" }],
        vm: [{ required: true, message: "请填写选项", trigger: "blur" }],
        rf: [{ required: true, message: "请填写选项", trigger: "blur" }],
        vx: [{ required: true, message: "请填写选项", trigger: "blur" }],
        xz1: [{ required: true, message: "请选择选项", trigger: "change" }],
        xz2: [{ required: true, message: "请选择选项", trigger: "change" }],
        xz3: [{ required: true, message: "请选择选项", trigger: "change" }],
        xz4: [{ required: true, message: "请选择选项", trigger: "change" }],
      },
      // 暂存
      DialogVisible: false,
    };
  },
  created() {
    // 暂存
    this.storageCheck();
    localStorage.setItem("state7", 1);
  },
  // 暂存
  //1 首先进入页面的时候需要监听浏览器的后退按钮，之后在操作的时候执行函数,在mounted中挂载去监听这个事件，并在methods里面添加函数，用来判断执行的条件
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      const state7 = localStorage.getItem("state7");
      // console.log(state7);
      window.addEventListener("popstate", this.back, false);
    }
  },
  // 暂存
  // 2：需要在退出页面的时候销毁这个监听事件
  destroyed() {
    window.removeEventListener("popstate", this.back, false);
  },
  methods: {
    // 暂存
    back() {
      // console.log(123);
      const state7 = localStorage.getItem("state7");
      // console.log(state7);
      if (state7 == 1) {
        // console.log(1111);
        this.$confirm(
          "检测到未保存的内容，是否在离开页面前保存？",
          "确认信息",
          {
            confirmButtonText: "暂存",
            cancelButtonText: "放弃修改",
            type: "warning",
            center: true,
          }
        )
          .then(() => {
            // this.$router.go(-1)
            // this.DialogVisible = true
            const state7 = localStorage.getItem("state7");
            // console.log(state7)
            // this.$message({
            //   type: "success",
            //   message: "暂存成功！",
            // });
            this.BackStorage();
            if (this.$route.path !== "/home") {
              this.$router.push({ path: "/home" });
            }
            // this.$router.push("/home");
            return false;
          })
          .catch(() => {
            // const state7 = sessionStorage.getItem('state7')
            // console.log(state7)
            this.$message({
              type: "info",
              message: "已取消暂存！",
            });
            if (this.$route.path !== "/home") {
              this.$router.push({ path: "/home" });
            }
            // this.giveUp()
            return false;
          });
      } else {
        // console.log(2222);
        this.$router.push({ path: "/home" });
      }
    },
    // 暂存
    // 放弃保存
    giveUp() {
      // console.log(345);
      window.localStorage.clear();
      if (this.$route.path !== "/home") {
        this.$router.push({ path: "/home" });
      }
    },
    submitForm(formName) {
      // console.log(this.dianBiaoFormForm);
      // console.log(this.dianBiaoFormForm.lg);
      // console.log(this.dianBiaoFormForm.rg);
      // console.log(this.dianBiaoFormForm.l);
      // console.log(this.dianBiaoFormForm.rs);
      // console.log(this.dianBiaoFormForm.lx);
      // console.log(this.dianBiaoFormForm.vm);
      // console.log(this.dianBiaoFormForm.rf);
      // console.log(this.dianBiaoFormForm.vx);
      // console.log(this.dianBiaoFormForm.xz1);
      // console.log(this.dianBiaoFormForm.xz2);
      // console.log(this.dianBiaoFormForm.xz3);
      // console.log(this.dianBiaoFormForm.xz4);
      // 验证为null
      //         for (var key in this.dianBiaoFormForm) {
      //   // console.log(this.dianBiaoFormForm[key]);
      //   if (this.dianBiaoFormForm[key] == 'null') {
      //     this.$message.error("题目未做完！");
      //     return false;
      //   }
      // }
      // for (var key in this.dianBiaoFormForm) {
      //   if (!this.dianBiaoFormForm[key]) {
      //     this.$message.error("题目未做完！");
      //     return false;
      //   }
      // }
      const l = sessionStorage.getItem("l");
      this.dianBiaoFormForm.l = l;
      const rs = sessionStorage.getItem("rs");
      this.dianBiaoFormForm.rs = rs;
      const lx = sessionStorage.getItem("lx");
      this.dianBiaoFormForm.lx = lx;
      const vm = sessionStorage.getItem("vm");
      this.dianBiaoFormForm.vm = vm;
      const rf = sessionStorage.getItem("rf");
      this.dianBiaoFormForm.rf = rf;
      const vx = sessionStorage.getItem("vx");
      this.dianBiaoFormForm.vx = vx;

      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post("/api/dianbiao/luru", {
            lg: this.dianBiaoFormForm.lg,
            rg: this.dianBiaoFormForm.rg,
            l: this.dianBiaoFormForm.l,
            rs: this.dianBiaoFormForm.rs,
            lx: this.dianBiaoFormForm.lx,
            vm: this.dianBiaoFormForm.vm,
            rf: this.dianBiaoFormForm.rf,
            vx: this.dianBiaoFormForm.vx,
            xz1: this.dianBiaoFormForm.xz1,
            xz2: this.dianBiaoFormForm.xz2,
            xz3: this.dianBiaoFormForm.xz3,
            xz4: this.dianBiaoFormForm.xz4,
          });
          // console.log(res)
          // console.log(res.data)
          if (res.data.res1 == false) {
            this.$message.error("请勿重复提交！");
            this.$router.push("/home");
          } else {
            if (res.code == 100) {
              this.$message.error("提交失败！");
            }
            if (res.code == 150) {
              this.$message.error("请勿重复提交！");
            }
            if (res.code == 422) {
              this.$message.error("请填完所有题目");
            }
            if (res.code == 200) {
              // 暂存
              window.localStorage.clear();
              this.$message.success("提交成功！");
              this.$router.push("/home");
            }
          }
        }
      });
    },
    getRadioValOne() {
      // console.log(this.dianBiaoFormForm.xz1);
      this.contentOne = this.dianBiaoFormForm.xz1;
    },
    getRadioValTwo() {
      // console.log(this.dianBiaoFormForm.xz2);
      this.contentTwo = this.dianBiaoFormForm.xz2;
    },
    getRadioValThree() {
      // console.log(this.dianBiaoFormForm.xz3);
      this.contentThree = this.dianBiaoFormForm.xz3;
    },
    getRadioValFour() {
      // console.log(this.dianBiaoFormForm.xz4);
      this.contentFour = this.dianBiaoFormForm.xz4;
    },
    // 暂存弹窗出现
    storage() {
      this.DialogVisible = true;
    },
    // 暂存弹窗里面的确定按钮
    storageOk() {
      const l = sessionStorage.getItem("l");
      this.dianBiaoFormForm.l = l;
      const rs = sessionStorage.getItem("rs");
      this.dianBiaoFormForm.rs = rs;
      const lx = sessionStorage.getItem("lx");
      this.dianBiaoFormForm.lx = lx;
      const vm = sessionStorage.getItem("vm");
      this.dianBiaoFormForm.vm = vm;
      const rf = sessionStorage.getItem("rf");
      this.dianBiaoFormForm.rf = rf;
      const vx = sessionStorage.getItem("vx");
      this.dianBiaoFormForm.vx = vx;

      window.localStorage.setItem("dianbiaolg", this.dianBiaoFormForm.lg);
      window.localStorage.setItem("dianbiaorg", this.dianBiaoFormForm.rg);
      window.localStorage.setItem("dianbiaol", this.dianBiaoFormForm.l);
      window.localStorage.setItem("dianbiaors", this.dianBiaoFormForm.rs);
      window.localStorage.setItem("dianbiaolx", this.dianBiaoFormForm.lx);
      window.localStorage.setItem("dianbiaovm", this.dianBiaoFormForm.vm);
      window.localStorage.setItem("dianbiaorf", this.dianBiaoFormForm.rf);
      window.localStorage.setItem("dianbiaovx", this.dianBiaoFormForm.vx);
      window.localStorage.setItem("dianbiaoxz1", this.dianBiaoFormForm.xz1);
      window.localStorage.setItem("dianbiaoxz2", this.dianBiaoFormForm.xz2);
      window.localStorage.setItem("dianbiaoxz3", this.dianBiaoFormForm.xz3);
      window.localStorage.setItem("dianbiaoxz4", this.dianBiaoFormForm.xz4);
      this.$message({
        message: "暂存成功！",
        type: "success",
      });
      localStorage.setItem("state7", 2);
    },
    // 浏览器返回里面的暂存
    BackStorage() {
      const l = sessionStorage.getItem("l");
      this.dianBiaoFormForm.l = l;
      const rs = sessionStorage.getItem("rs");
      this.dianBiaoFormForm.rs = rs;
      const lx = sessionStorage.getItem("lx");
      this.dianBiaoFormForm.lx = lx;
      const vm = sessionStorage.getItem("vm");
      this.dianBiaoFormForm.vm = vm;
      const rf = sessionStorage.getItem("rf");
      this.dianBiaoFormForm.rf = rf;
      const vx = sessionStorage.getItem("vx");
      this.dianBiaoFormForm.vx = vx;

      window.localStorage.setItem("dianbiaolg", this.dianBiaoFormForm.lg);
      window.localStorage.setItem("dianbiaorg", this.dianBiaoFormForm.rg);
      window.localStorage.setItem("dianbiaol", this.dianBiaoFormForm.l);
      window.localStorage.setItem("dianbiaors", this.dianBiaoFormForm.rs);
      window.localStorage.setItem("dianbiaolx", this.dianBiaoFormForm.lx);
      window.localStorage.setItem("dianbiaovm", this.dianBiaoFormForm.vm);
      window.localStorage.setItem("dianbiaorf", this.dianBiaoFormForm.rf);
      window.localStorage.setItem("dianbiaovx", this.dianBiaoFormForm.vx);
      window.localStorage.setItem("dianbiaoxz1", this.dianBiaoFormForm.xz1);
      window.localStorage.setItem("dianbiaoxz2", this.dianBiaoFormForm.xz2);
      window.localStorage.setItem("dianbiaoxz3", this.dianBiaoFormForm.xz3);
      window.localStorage.setItem("dianbiaoxz4", this.dianBiaoFormForm.xz4);
      this.$message({
        message: "暂存成功！",
        type: "success",
      });
      // localStorage.setItem("state7", 2);
    },
    // 获取暂存里面的数据
    storageCheck() {
      const lg = window.localStorage.getItem("dianbiaolg");
      this.dianBiaoFormForm.lg = lg;
      const rg = window.localStorage.getItem("dianbiaorg");
      this.dianBiaoFormForm.rg = rg;
      const l = window.localStorage.getItem("dianbiaol");
      this.dianBiaoFormForm.l = l;
      const rs = window.localStorage.getItem("dianbiaors");
      this.dianBiaoFormForm.rs = rs;
      const lx = window.localStorage.getItem("dianbiaolx");
      this.dianBiaoFormForm.lx = lx;
      const vm = window.localStorage.getItem("dianbiaovm");
      this.dianBiaoFormForm.vm = vm;
      const rf = window.localStorage.getItem("dianbiaorf");
      this.dianBiaoFormForm.rf = rf;
      const vx = window.localStorage.getItem("dianbiaovx");
      this.dianBiaoFormForm.vx = vx;
      const xz1 = window.localStorage.getItem("dianbiaoxz1");
      this.dianBiaoFormForm.xz1 = xz1;
      const xz2 = window.localStorage.getItem("dianbiaoxz2");
      this.dianBiaoFormForm.xz2 = xz2;
      const xz3 = window.localStorage.getItem("dianbiaoxz3");
      this.dianBiaoFormForm.xz3 = xz3;
      const xz4 = window.localStorage.getItem("dianbiaoxz4");
      this.dianBiaoFormForm.xz4 = xz4;
      for (var key in this.dianBiaoFormForm) {
        // console.log(this.dianBiaoFormForm[key]);
        if (this.dianBiaoFormForm[key] == "null") {
          this.dianBiaoFormForm[key] = "";
          // return false;
        }
      }
    },
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
}
table {
  border-collapse: collapse;
  border: 0.5px #525152 solid;
  margin: 0 auto;
  font-size: 17px;
  text-align: center;
}
th,
td {
  /* border-collapse: collapse; */
  border: 0.5px #525152 solid;
  text-align: center;
  /* font-size: 17px; */
  width: 10%;
  line-height: 30px;
}
.allStyle {
  height: 100%;
  width: 50%;
  min-width: 320px;
  margin: 0 auto;
}

.el-radio {
  display: block;
  /* height: 20px; */
  width: 50%;
  /* line-height: 20px; */
  /* padding: 5px; */
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-radio-group {
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-form-item__content .submitButton {
  width: 20%;
  display: block;
  margin: 0 auto;
}
.btn {
  /* width: 20%;
  margin-left: 40%;
  margin-bottom: 2vw; */
  left: 0%;
  margin-bottom: 5%;
  bottom: 0%;
  width: 20%;
  transform: translate(120%, 30%);
}
</style>
